<template>
	<view class="classfy-manage">
		<NavBar title="分类管理"/>
		<view class="content">
			<view class="classfy-item" v-if="categoryList.length" v-for="(item, i) in categoryList" :key="item">
				<view class="classfy-name">
					<view class="num"> {{ (i+1)>=10?(i+1):'0'+(i+1) }} </view>
					<view class="name-status">
						<view class="name"> {{item.title}} </view>
						<view class="status" :class="item.status==1?'a-status':''"> {{item.status==1?'显示':'隐藏'}} </view>
					</view>
				</view>
				<view class="right-btn-box">
					<view class="btn" @tap="delCategory(item.id, i)"> 删除 </view>
					<view class="btn" @tap="editCategory(item)"> 编辑 </view>
				</view>
			</view>
			<Empty txt="暂未添加分类" v-else/>
			<view class="btn-box">
				<view class="btn" @tap="goAddClassfy"> 添加分类 </view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue';
	import Empty from '@/components/Empty.vue';
	import { GetGoodsCategoryApi, DelGoodsCategoryApi } from '@/service/shop.js'
	const goAddClassfy = () => {
		uni.navigateTo({
			url: '/pages/shopPages/classfyManage/addClassfy/addClassfy'
		})
	}
	const categoryList = ref([])
	const getCategoryList = () => {
		GetGoodsCategoryApi().then(res => {
			categoryList.value = res.data
		})
	}
	const delCategory = (id, i) => {
		DelGoodsCategoryApi({id}).then(res => {
			console.log(res);
			categoryList.value.splice(i, 1)
		})
	}
	const editCategory = (info) => {
		uni.navigateTo({
			url: `/pages/shopPages/classfyManage/addClassfy/addClassfy?info=${JSON.stringify(info)}`
		})
	}
	onShow(() => {
		getCategoryList()
	})
</script>

<style scoped lang="scss">
	.classfy-manage {
		.content {
			padding: 10px 12px;
			box-sizing: border-box;
		}
		.classfy-item {
			padding: 10px;
			border-radius: 10px;
			margin-bottom: 10px;
			background-color: #fff;
			display: flex;
			align-items: end;
			justify-content: space-between;
			.classfy-name {
				display: flex;
				align-items: center;
				.num {
					color: #999999;
					font-size: 16px;
					font-weight: 500;
					line-height: 22px;
					margin-right: 10px;
				}
				.name-status {
					margin-left: 10px;
					position: relative;
					&::before {
						display: block;
						content: '';
						height: 40px;
						width: 1px;
						background-color: #d8d8d8;
						position: absolute;
						top: 50%;
						left: -10px;
						transform: translateY(-50%);
					}
					.name {
						color: #333333;
						font-size: 16px;
						font-weight: 500;
						line-height: 22px;
						margin-bottom: 5px;
					}
					.status {
						color: #999999;
						font-size: 14px;
						font-weight: 400;
						line-height: 16px;
					}
					.a-status {
						color: #FF3B1E;
					}
				}
			}
			.right-btn-box {
				display: flex;
				.btn {
					width: 56px;
					height: 22px;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #333333;
					font-size: 12px;
					font-weight: 400;
					margin-left: 10px;
					background: #FFFFFF;
					border-radius: 151px;
					border: 1px solid #999999;
					box-sizing: border-box;
				}
			}
		}
		.btn-box {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #f4f5f7;
			padding: 0 12px 10px;
			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 50px;
				color: #FFFFFF;
				font-size: 17px;
				font-weight: 500;
				background: #FF3B1E;
				border-radius: 106px 106px 106px 106px;
			}
		}
	}
</style>
